<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>雨滴特效</title>
		<style>
			body {
				margin: 0;
			}
			
			canvas {
				background-color: black;
				display: block;
			}
			
			#ff {
				position: absolute;
				top: 30%;
				left: 40%;
				z-index: 1;
				text-align: center;
				color: white;
				font: "楷体";
			}
			
			img {
				position: absolute;
				top: 10%;
				left: 20%;
				transform: scale(0.6);
			}
		</style>
	</head>

	<body>
		<img src="image/welcome.png" />

		<canvas class='rain'>
			
		</canvas>
	</body>

	<script src="js/jquery-3.3.1.min.js"></script>
	<script>
		var canvas = document.querySelector('.rain');
		var ctx = canvas.getContext('2d')
		var aRain = [];

		var w = window.innerWidth;
		var h = window.innerHeight;
		canvas.width = w;
		canvas.height = h;
		window.onresize = function() {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
		}

		function random(min, max) {
			return Math.random() * (max - min) + min;
		}

		function Rain() {};
		Rain.prototype = {
			init: function() {
				this.x = random(0, w);
				this.y = 0;
				this.vy = random(4, 6);
				this.h = random(0.8 * h, 0.9 * h)
				this.r = 1;
				this.vr = 1;
				this.rr = random(60, 130);
				this.ready = true;
			},
			draw: function() {
				if(this.y < this.h && this.ready) {
					ctx.beginPath();
					ctx.fillStyle = '#31f7f7';
					ctx.fillRect(this.x, this.y, 4, 10);
				} else {
					ctx.beginPath();
					ctx.strokeStyle = '#31f7f7';
					ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
					ctx.stroke();
				}
			},
			move: function() {
				if(!this.ready) {
					if(this.r < 1) {
						this.ready = true;
					} else {
						this.r--;
						this.draw();
						return;
					}
				}

				if(this.y < this.h) {
					this.y += this.vy;
				} else {
					this.r += this.vr;
				};
				if(this.r < this.rr) {
					this.draw();
				} else {
					this.init();
				};
			}
		}

		setInterval(function() {
			ctx.fillStyle = 'rgba(0,0,0,0.05)';
			ctx.fillRect(0, 0, w, h);
			for(var item of aRain) {
				item.move();
			}
		}, 1000 / 60)

		function creatRain(num) {
			for(var i = 0; i < num; i++) {
				setTimeout(function() {
					var rain = new Rain();
					aRain.push(rain);
					rain.init();
					rain.draw();
				}, 200 * i)
			}
		}

		//		creatRain(60);
		canvas.onmousedown = function(e) {
			var rain = new Rain();
			rain.init();
			rain.x = e.offsetX;
			rain.y = e.offsetY;
			rain.r = random(5, 30);
			rain.ready = false;
			aRain.push(rain);
		}



		var ff = $("<div id='ff'></div>")
		var ff1 = $("<p>添加教师ID：<input type='text' id='addAccount'/></p>")
        var ff5 = $("<p>教师姓名：<input type='text' id='addName'/></p>")
		var ff2 = $("<p>输入密码：<input type='text' id='addPwd'/></p>")
		var ff3 = $("<p>确认密码：<input type='text' id='addPwd0'/></p>")
		var ff4 = $("<br/><button id='login'>确认注册</button>")

		ff.append(ff1).append(ff5).append(ff2).append(ff3).append(ff4).appendTo($("body"))

		$("#login").click(function() {
			
			let account = $("#addAccount").val()
            let name = $("#addName").val()
			let pwd = $("#addPwd").val()
			let pwd0 = $("#addPwd0").val()
			
//			console.log(account);console.log(pwd);console.log(pwd0)

			if(account && pwd && pwd0 && pwd == pwd0) {
				$.ajax({
					type: "get",
					url: "http://localhost:8080/addTeach?account="+ account +"&name=" + name+"&pwd="+pwd,
					async: false,
					data: {
						account:  account,
						name:  name,
						pwd:  pwd
					},
					success:function(re){
						alert(re)
						location.reload();
					}
				});
			}
			
			else{
				alert("请核对您所填写的信息！")
			}
		})
	</script>

</html>